<!DOCTYPE html>
<html>
  <head>
    <title>Enhanced GitHub Options</title>
    <style type="text/css">
      body {
        font-size: 15px;
      }

      .background--grey {
        background: #f5f5f5;
      }

      .padding--10 {
        padding: 10px;
      }

      .push--top {
        margin-top: 10px;
      }

      .text--center {
        text-align: center;
      }

      .vertical-center {
        vertical-align: middle;
      }

      .inline-block {
        display: inline-block;
      }

      .hidden {
        display: none;
      }

      .float--right {
        float: right;
      }

      .success-msg {
        color: #3fb594;
      }

      .warning-msg {
        color: #de973e;
      }

      .btn {
        background: #3fb594;
        color: #fff !important;
        border: none;
        border-radius: 2px;
        color: #000;
        position: relative;
        height: 36px;
        margin: 0;
        min-width: 100%;
        padding: 0 16px;
        display: inline-block;
        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0;
        overflow: hidden;
        will-change: box-shadow;
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
          color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        outline: none;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        line-height: 36px;
        vertical-align: middle;
      }
      .btn:hover {
        background: #3fb594;
        color: #fff !important;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      }

      .btn.disabled {
        background: #fefefe;
        pointer-events: none;
      }

      .ph-link {
        color: #da552f;
      }
    </style>
  </head>
  <body>
    <div class="inline-block  float--right  hidden" id="status" style="margin-top: 15px;">
      <svg
        fill="#3fb594"
        height="24"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
        class="vertical-center"
      >
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
      </svg>
      <span id="status--text" class="success-msg  vertical-center"></span>
    </div>
    <h3 class="inline-block">Options</h3>

    <div class="background--grey  push--top  padding--10">
      <div style="padding-bottom: 10px;">Enter GitHub Access Token</div>
      <input
        type="text"
        name=""
        placeholder="GitHub Access Token"
        id="x-github-token"
        class="push--top"
        style="width: 98%;"
      />

      <div class="push--top  hidden" id="validation-block">
        <svg
          fill="#de973e"
          height="24"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
          class="vertical-center"
        >
          <path d="M0 0h24v24H0z" fill="none" />
          <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
        </svg>
        <span id="validation-warning" class="warning-msg  vertical-center  push--top"></span>
      </div>

      <button class="btn" id="save-btn" style="margin-top: 20px;">Save</button>
    </div>

    <hr />

    <div class="background--grey  padding--10  text--center">
      <div style="padding: 15px 10px;">
        <!-- Place this tag where you want the button to render. -->
        <iframe
          src="https://ghbtns.com/github-btn.html?user=softvar&repo=enhanced-github&type=star&count=true&size=large"
          frameborder="0"
          scrolling="0"
          width="160px"
          height="38px"
        ></iframe>

        <iframe
          src="https://platform.twitter.com/widgets/tweet_button.html?size=l&url=http://github.com/softvar/enhanced-github&via=s0ftvar&text=Display size of each file, download link and option to copy file contents&hashtags=extension,github"
          title="Twitter Tweet Button"
          style="width: 76px;height: 37px;border: 0;overflow: hidden;display: inline-block;"
        >
        </iframe>
      </div>
      <div>
        <a class="ph-link" href="https://www.producthunt.com/tech/enhanced-github" target="_blank">
          Featured On ProductHunt
        </a>
      </div>
    </div>

    <script type="text/javascript" src="options.js"></script>
  </body>
</html>
